<template>
  <div>
    <van-nav-bar
  title="房屋管理"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
/>
<div class="img" v-if="isShow">
  <img src="http://liufusong.top:8080/img/not-found.png" alt="">
  <p class="p3">您还没有房源，去<router-link class="link" to="/fbfy">发布房源</router-link>
吧~</p>
<div class="loding">
<van-loading text-color="#ffffff" size="24px" vertical>加载中...</van-loading>
</div>
</div>
   <div class="lb" v-for="item in list" :key="item.houseCode" v-else>
        <ul>
            <li>
              <div class="img1"><img :src="`http://liufusong.top:8080${item.houseImg}`" alt=""></div>
                <div class="text">
                  <div class="h4"><h4>{{item.title}}</h4></div>
                  <p>{{item.desc}}</p>
                  <div class="dt">{{item.tags[0]}}</div>
                  <span class="span"><strong>{{item.price}}</strong>元/月</span>
                </div>
            </li>
            <hr>
        </ul>
    </div>
  </div>
</template>

<script>
import { Myhouse } from '@/api/article'
export default {
  methods: {
    onClickLeft () {
      this.$router.push('/mylogin')
    }
  },
  data () {
    return {
      isShow: true,
      list: []
    }
  },
  async created () {
    const res = await Myhouse()
    console.log(res)
    this.list = res.body
    if (this.list != null) {
      this.isShow = false
    }
  }
}
</script >

<style lang="less" scoped>
.img{
  text-align: center;
  img{
    width: 45%;
    margin-top: 30px;
  }
}
.p3{
  margin-top: 20px;
  color: black;
}
li{
width: 100%;
display: flex;
height: 120px;
margin-top: 24px;
img{
  width: 106px;
  height: 80px;
}
}
ul{
  position:relative;
}
.img1{
  width: 140px;
height: 110px;
}
.text{
  margin-left: 10px;
  margin-top: -20px;
}
.h4{
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
p{
  margin-top: -13px;
  color: #afb2b3;
  font-size: 14px;
}
.dt{
  width: 50px;
  background-color:#e1f5f8;
  text-align: center;
  color: #74c4dc;
  height: 20px;
  font-size: 14px;
  margin-bottom: 10px;
}
.span{
  color: #fa5741;
}
strong{
  font-size: 18px;
}
hr{
  color: #ccc;
  border: 2px solid #fafafa;
  margin-top: 10px;
}
.bt{
  position: fixed;
  width: 100%;
  margin-top: -44px;
}
.link{
  color: #1cb676;
}
</style>
